<template>
  <div class="table-tasteorgan">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd(0,'')" >
          创建兴趣小组
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>

        <el-form ref="form" :model="queryForm"  label-width="100px" >



          <el-form-item  prop="groupName" >
            <el-input v-model.trim="queryForm.groupName" autocomplete="off" placeholder="小组名称"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" style="margin-left: 20px" @click="search(1,'')"  size="mini">条件查询</el-button>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :data="list"
    >
      <el-table-column

        label="小组编号"
        prop="groupCode"

      ></el-table-column>
      <el-table-column
        prop="groupName"
        label="小组名称"

      ></el-table-column>
      <el-table-column

        label="小组负责人"

        prop="groupLeader"
      ></el-table-column>
      <el-table-column
        label="小组成员"
        prop="teamMembers"

      >
        <template slot-scope="scope" >
          <div v-for="(item, index) in list[scope.$index].teamMembers" :key="index" style="float: left"  >
              <div v-if="!scope.row.teamMembers[index].quitTime">

            {{scope.row.teamMembers[index].elderlyName}},
              </div>

          </div>

        </template>

      </el-table-column>



      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="350px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text"  @click="handleAdd(scope.row.id,scope.row)" >修改<i class="el-icon-edit"></i></el-button>

          <el-button type="text"  @click="handleAdditem(scope.row.id,scope.row)" >添加小组成员<i class="el-icon-user"></i></el-button>
          <el-button type="text"  @click="handleAddactive(scope.row.id,scope.row)" >
            记录小组活动情况<i class="el-icon-tickets"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"
      destroy-on-close

    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" >



        <el-form-item label="小组负责人" prop="groupLeader" >
          <el-input v-model.trim="form.groupLeader" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="小组名称" prop="groupName">
          <el-input v-model.trim="form.groupName" autocomplete="off"></el-input>
        </el-form-item>




      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close" >取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <additem ref="additem"></additem>
    <activity ref="active"></activity>
  </div>
</template>

<script>
    import {add,search,reserve} from "../../api/tasteorgan";
    import additem from "./tasteorgan/additem";
    import activity from "./tasteorgan/activity";
    export default {
        name: "Tasteorgan",
        components: {activity, additem},
        data(){
            return{
                id:0,
                list:[],
                title:"创建兴趣小组",
                listLoading:true,
                total:0,
                background:true,
                dialogFormVisible:false,
                rules:{
                    groupLeader:[
                        { required: true, message: '请输入负责人名字', trigger: 'blur' },

                    ],
                    groupName:[
                        { required: true, message: '请输入小组名称', trigger: 'blur' },

                    ]
                },
                form:{

                    groupLeader:"",//小组负责人
                    groupName:"",//小组名称
                    institutionNumber:""//机构编号
                },
                queryForm:{
                    currPageNo: 1,
                    limit: 8,
                    institutionNumber:"",
                    groupName:""
                }
            }
        },
        created(){
            this.form.institutionNumber=localStorage.getItem('institutionNumber')
            this.search()
        },
        methods:{
            handleAdd(id,data){
                this.dialogFormVisible=true
                this.id=id
                console.log(data)
                if(id>0){
                    this.title="修改兴趣小组信息"
                    this.form={
                        ...data
                    }
                }else {
                    this.title="创建兴趣小组"
                    this.form={
                        groupLeader:"",//小组负责人
                        groupName:"",//小组名称
                        institutionNumber:localStorage.getItem('institutionNumber')//机构编号
                    }
                }
            },
            save(){

                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        if(this.id>0){


                            const {code} = await reserve(this.form);
                            if(code==200){
                                this.$baseMessage("修改成功");
                                this.queryForm.currPageNo=1
                                this.search()
                                this.dialogFormVisible=false

                            }else {
                                return false
                            }

                        }else{

                            const {code} = await add(this.form);
                            if(code==200){
                                this.$baseMessage("添加成功");
                                this.queryForm.currPageNo=1
                                this.search()
                                this.dialogFormVisible=false

                            }else {
                                return false
                            }
                        }




                    }
                    else {
                        return false;
                    }
                });
                console.log(this.form)
            },
            search(id){
                if(id==1){
                    this.queryForm.currPageNo=1
                }
                this.listLoading=true
                    this.queryForm.institutionNumber =localStorage.getItem('institutionNumber')
                console.log(this.queryForm)
                    search(this.queryForm).then(res =>{
                        this.list=res.data.data
                        this.total=res.data.total
                        setTimeout(() => {
                            this.listLoading = false;
                        }, 500);
                    })


            },
            handleAddactive(index,row){
                console.log(row)
                this.$refs["active"].showEdit(row);
            },
            handleAdditem(index,row){
                    this.$refs["additem"].showEdit(row);

            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
            },
            handleCurrentChange(val) {

                this.queryForm.currPageNo = val;
                this.search();
            },
            close(){
                this.dialogFormVisible=false
            }

        }
    }
</script>

<style scoped>

</style>
